<template>
	<view>
		<!-- 顶部占位 -->
		<!-- <view-navbar></view-navbar> -->
		<view class="">
			<view class="content">
				<view class="margin">
					<view class="flex-cen" style="margin-top:10rpx ; margin-bottom: 16rpx;">
						<!-- 						<u-icon name="arrow-left" color="" size="25" @click="back" style="margin-right: 20rpx;">
						</u-icon> -->
						<u-search @search="search" style="width: 624rpx;" :showAction="false" placeholder="搜索商品"
							v-model="form.uproductName" :clearabled="true" searchIconColor="#2d81ff" borderColor="#DDDDDD"
							bgColor="#ffffff">
						</u-search>
					</view>
				</view>

				<view class="categoryContent">
					<!-- 目录 -->
					<scroll-view scroll-y class="left-aside">
						<view v-for="(item, index) in list" :key="item.id" class="f-item b-b"
							:class="{ active: index === currentIndex }" @click="tabtap(item, index)">
							{{ item.name }}
						</view>
					</scroll-view>
					<!-- 内容 -->
					<scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll"
						:scroll-top="tabScrollTop">
						<!-- 标签 -->
						<view class="mt10">
							<view class="Subsection margin ms17" style="display: flex;justify-content: space-between; ">
								<view class="u-page__tag-item" v-for="(item, index) in radios" :key="index">
									<u-tag :text="item.name" :plain="!item.checked" :name="index" @click="radioClick(index, item)">
									</u-tag>
								</view>
							</view>
						</view>
						<!-- 排序 -->
						<view class="margin ">
							<view class="item">
								<view class="ms10 flexflex">
									<view class=" flex-cen mr20">
										<view class="" style="margin-right: 19rpx; ">
											综合
										</view>
										<u-icon name="arrow-down-fill"></u-icon>
									</view>
									<view class=" flex-cen">
										<view class="" style="margin-right: 19rpx;;">
											价格
										</view>
										<u-icon name="arrow-down-fill"></u-icon>
									</view>
								</view>
							</view>
						</view>
						<!-- 商品 -->
						<block v-if="slist.length > 0">
							<view v-for="(item) in slist" :key="item.uproductid" class="s-list" :id="'main-' + item.id">
								<image @click="$pub.go(`/pages_shop/goodsDetail/goodsDetail?data=${item.uproductid}`)"
									:src="item.uproductPic"></image>
								<view class="details">
									<text>{{ item.uproductName || '商品名' }}</text>
									<!-- 10片/盒 -->
									<text>{{ item.uproductSpecs || '商品规格' }}</text>
									<view class="" style="display: flex;justify-content: space-between;">
										<text class="color_orange mr20">￥{{ item.upretailPrice || '100' }}</text>
										<image src="/static/img/goodscate/goodscar.png" style="width: 50rpx;height: 50rpx;"></image>
										<!-- 									<u-button @click="addCom(item)" text="添加用药" type="primary"
											size='mini'></u-button> -->
									</view>
								</view>
							</view>
						</block>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
export default {
	data() {
		return {
			/* 搜素 */
			form: {
				"pageNum": 1,
				"pageSize": 10,
				"productCategoryId": "",
				"productTypeId": "",
				"uproductName": "",
				"total": 0
			},
			/* 单选标签 */
			radios: [],
			sizeCalcState: false,
			tabScrollTop: 0,
			currentIndex: 0,
			/* 目录 */
			list: [],
			/* 商品列表 */
			slist: [],
			/* 用药数量 */
			num: 0
		}
	},
	created() {
		this.loadData();
	},
	onLoad: function (option) {
		if (typeof option.type != 0) {
			// this.current = JSON.parse(decodeURIComponent(option.type));
			this.currentIndex = JSON.parse(decodeURIComponent(option.type));
		}
	},
	onShow() {
		// uni.hideTabBar({
		// 	animation: false
		// })
		this.getListKind()
		this.getListType()
	},
	onPullDownRefresh() {
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		/* 搜索返回 */
		back() {
			/*uni.navigateBack({
				delta: 1
			})*/
			//@zxyuns 处理兼容，如果没有上一级界面则返回首页
			const pages = getCurrentPages();
			if (pages.length === 2) {
				uni.navigateBack({
					delta: 1
				});
			} else if (pages.length === 1) {
				uni.switchTab({
					url: '/pages/home/home',
				})
			} else {
				uni.navigateBack({
					delta: 1
				});
			}
		},

		/* 初始加载 */
		loadData() {
			// this.slist = this.list[0].childlist
			this.getProduct()
		},
		async getListKind() {
			let re = await this.$API.productApi.getListType()
			this.list = re
		},
		async getListType() {
			let re = await this.$API.productApi.getListKind()
			/* 单选 */
			this.radios = re.map((i) => {
				i.checked = false;
				return i;
			})
			/* 补充数据 */
			this.radios.unshift({
				name: "全部",
				checked: true,
				// productCategoryId: '1'
			})
		},
		/* 商品列表 */
		async getProduct() {
			let re = await this.$API.productApi.getProduct(this.form)
			this.form.pageNum = re.current
			this.form.pageSize = re.size
			this.form.total = re.total
			this.slist = re.records
			return re.records
		},
		/* 添加用药 */
		addCom(e) {
			// let obj = {
			// 	name: "药品",
			// 	guige: '10/片每盒',
			// 	价格: '50',
			// 	img: "/static/logo.png",
			// 	sele: 2,
			// }
			/* 额外属性 */
			e.sele = 2
			e.count = 1
			this.num++
			if (this.num >= 1) {
				// this.$pub.go('/pages/preview/preview')
				uni.navigateTo({
					url: '/pages/online/online'
				})
				setTimeout(() => {
					uni.$emit('addProduct', e)
				}, 100)
			}
		},
		//一级分类点击
		tabtap(item, index) {
			/* 动态css */
			this.currentIndex = index
			/* 条件 */
			this.form.productTypeId = item.productTypeId
			/* 重新请求 */
			this.getProduct()
		},
		/* tag点击 */
		radioClick(indexR, item) {
			this.radios.map((item, index) => {
				item.checked = index === indexR ? true : false
			})
			/* 条件 */
			this.form.productCategoryId = item.productCategoryId
			/* 重新请求 */
			this.getProduct()
		},
		/* 搜素 */
		search(data) {
			// console.log(data, "data");
			this.form.uproductName = data
			/* 重新请求 */
			this.getProduct()
		},

		/* 去商品详情 */
		toPage(href) {
			uni.navigateTo({
				url: href
			});
		},


		//右侧栏滚动
		asideScroll(e) {
			if (!this.sizeCalcState) {
				this.calcSize();
			}
			let scrollTop = e.detail.scrollTop;
			let tabs = this.slist.filter(item => item.top <= scrollTop).reverse();
			if (tabs.length > 0) {
				this.currentId = tabs[0].pid;
			}
		},
		//计算右侧栏每个tab的高度等信息
		calcSize() {
			let h = 0;
			this.slist.forEach(item => {
				let view = uni.createSelectorQuery().select("#main-" + item.id);
				view.fields({
					size: true
				}, data => {
					item.top = h;
					h += data.height;
					item.bottom = h;
				}).exec();
			})
			this.sizeCalcState = true;
		},









		/* 搜索返回 */
		// back() {
		// 	/*uni.navigateBack({
		// 		delta: 1
		// 	})*/
		// 	//@zxyuns 处理兼容，如果没有上一级界面则返回首页
		// 	const pages = getCurrentPages();
		// 	if (pages.length === 2) {
		// 		uni.navigateBack({
		// 			delta: 1
		// 		});
		// 	} else if (pages.length === 1) {
		// 		uni.switchTab({
		// 			url: '/pages/index/index',
		// 		})
		// 	} else {
		// 		uni.navigateBack({
		// 			delta: 1
		// 		});
		// 	}
		// },
	},
}
</script>

<style lang='scss' scoped>
/* #ifdef MP */
::v-deep .u-search__content__input {
	font-size: 28rpx !important;
}

/* #endif */
/* 更改tag切换颜色 */
::v-deep .u-tag--primary {
	background-color: #7976E9;
	border-color: #7976E9;

}

::v-deep .u-tag--primary span {
	color: #FFFFFF;
}

.item {
	text-align: center;
}

.content {
	display: flex;
	flex-direction: column;
}

.categoryContent {
	width: 100%;
	height: calc(100vh - 100rpx);
	display: flex;
	/* border-top: 2upx solid #f0f0f0; */
	box-sizing: border-box;
}

/* 左右cate */
.left-aside,
.right-aside {
	padding-bottom: 100rpx;
}

.left-aside {
	flex-shrink: 0;
	width: 154upx;
	background-color: #f8f8f8;
	overflow: hidden auto;
}

.f-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 86upx;
	font-size: 26upx;
	position: relative;

	&.active {
		color: $uni-primary;
		background: #fff;

		&:before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			height: 36upx;
			width: 9upx;
			background-color: $uni-primary;
			border-radius: 0 8rpx 8rpx 0;
			opacity: .8;
		}
	}
}

.right-aside {
	flex: 1;
	overflow: hidden;
}

.s-item {
	display: flex;
	align-items: center;
	height: 58upx;
	padding-top: 6upx;
	font-size: 22upx;
	/* color: $font-color-dark; */
}

.s-list {
	display: flex;
	justify-content: space-between;
	padding: 20upx;

	image {
		width: 192upx;
		height: 140upx;
		margin-right: 26upx;
	}

	.details {
		flex: 1;
		display: flex;
		justify-content: center;
		flex-direction: column;
		/* align-items: flex-start; */
		align-items: stretch;

		text {
			&:first-child {
				font-size: 28rpx;
				font-weight: bold;
				color: #161712;
			}

			&:nth-child(2) {
				font-size: 24rpx;
				font-weight: 400;
				color: #666;
			}
		}
	}
}

.t-list {
	display: flex;
	/* align-items: flex-end; */
	background: #fff;

	&:after {
		content: '';
		flex: 99;
		height: 0;
	}
}

.t-item {
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 178upx;
	font-size: 28upx;
	color: #666;
	padding-bottom: 20upx;

	image {
		width: 140upx;
		height: 140upx;
	}
}
</style>